<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>筛选器</title>
		<link rel="stylesheet" href="css/layui.css" type="text/css" />
		<style>
		    body,html{
		    	width: 100%;
		    	height: 100%;
		    	font-family: "微软雅黑";
		    }
			.containner{
				width:50%;
				height: 800px;
				margin: auto;
				border: 1px solid #999;
				
				background:-webkit-linear-gradient(left,#dae2f8,#d6a4a4);
				background: -moz-linear-gradient(#dae2f8, #d6a4a4);
				background: -o-linear-gradient(#dae2f8, #d6a4a4);
				filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=0,finishx=50,finishy=50)
			}
			.title{
				text-align: center;
			}
			.title>span{
				display: inline-block;
				font-size: 18px;
				font-weight: 600;
				letter-spacing: 2px;
			}
			
			.left{
				width: 40%;
				height: 300px;
				border: 1px solid #e2e2e2;
				border-top:none ;
				float: left;
				margin: 20px;
			}
			.right{
				width: 50%;
				height: 600px;
				border: 1px solid #e2e2e2;
				float: left;
				margin: 20px;
			}
			.inputs-group{
				width: 80%;
				margin:15px auto;
				line-height: 40px;
				
			}
			#login{
				width: 60px;
				height: 30px;
				border: none;
				background: #DCDCDC;
				cursor: pointer;
				margin-left:60px;
			}
			#login:hover{
				opacity: 0.5;
			}
			.password{
				margin-left: 12px;
			}
			.right>table{
				width:100%;
				margin: auto;
				text-align: center;
			}
			select{
				float: right;
			}
			.delTd{
				text-decoration: none;
				color: #000000;
				display: inline-block;
				width: 30px;
				line-height: 30px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="containner">
			<div class="title">
				<span>筛选器</span>
			</div>
			
			<div class="main">
				<div class="left">
					<div class="layui-tab tabSelect">
					  <ul class="layui-tab-title">
					    <li class="layui-this">登录</li>
					    <li>注册</li>
					  
					  </ul>
					  <div class="layui-tab-content">
					    <div class="layui-tab-item layui-show">
					    	<div class="inputs-group">
					    		<div  class="username">
					    			用户名：<input type="text" placeholder="请输入用户名">
					    		</div>
					    		<div  class="password">
					    			密码：<input type="text" placeholder="请输入密码">
					    		</div>
					    		
					    		<button id="login">登录</button>
					    	</div>
					    </div>
					    <div class="layui-tab-item">
					    	 <div class="inputs-group">
					    	    <div class="username">
					    			用户名：<input type="text" placeholder="请输入用户名">
					    		</div>
					    		<div  class="password">
					    			密码：<input type="text" placeholder="请输入密码">
					    		</div>
					    		
					    		<button id="login">注册</button>
					    	</div>
					    </div>
					    
					  </div>
					</div>
				</div>
				<div class="right">
					<div class="table-title">
						<span>势力列表</span>
						<select  name="">
							<option value="0">显示所有</option>
							<option value="1">魏</option>
							<option value="2">蜀</option>
							<option value="3">吴</option>
						</select>
					</div>
					<table border="" cellspacing="" cellpadding="">
						<thead>
							<th>编号</th>
							<th>名字</th>
							<th>所属势力</th>
							<th>所在地</th>
							<th>删除</th>
						</thead>
						
						<tbody class="tbMain">
							<!--<tr>
								<td>1</td>
								<td>刘备</td>
								<td>蜀</td>
								<td>成都</td>
								<td><a class="delTd">删除</a></td>
							</tr>-->
						</tbody>
						
					</table>
				</div>
			</div>
			
		</div>
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script src="js/layui.all.js" type="text/javascript"></script>
		<script type="text/javascript">
		
		//选项卡 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element();
		  
		  //…
		});
		
		//动态创建
		var jsons = [
		{id:1,name:"刘备",power:"蜀",address:"成都",opt:"删除"},
		{id:2,name:"曹操",power:"魏",address:"许都",opt:"删除"},
		{id:3,name:"孙权",power:"吴",address:"许都",opt:"删除"},
		{id:4,name:"关羽",power:"蜀",address:"锦州",opt:"删除"},
		{id:5,name:"张辽",power:"魏",address:"合肥",opt:"删除"},
		{id:6,name:"周瑜",power:"吴",address:"夏口",opt:"删除"},
		{id:7,name:"诸葛亮",power:"蜀",address:"汉中",opt:"删除"},
		{id:8,name:"郭嘉",power:"魏",address:"洛阳",opt:"删除"},
		{id:9,name:"黄盖",power:"吴",address:"江夏",opt:"删除"},
		]
        
        $(function(){
        	createElement();
        })
        
        function createElement(){
        	
        	var html='';
        	
        	for(var i=0;i<jsons.length;i++){
        		html+='<tr><td>'+jsons[i].id+'</td><td>'+jsons[i].name+'</td>'+
        		'<td>'+jsons[i].power+'</td><td>'+jsons[i].address+'</td><td><a class="delTd">'+jsons[i].opt+'</a></td></tr>';
        	}
        	$(".tbMain").html(html);
        	
        	  //删除
        	  $(".delTd").each(function(){
        	  	this.onclick = function(){
        	  		alert("确定删除？");
        	  		
        	  		$(this).parent().parent().remove();
        	  		
        	  	}
        	  })
        }
         
         //下拉列表事件
         $("select").change(function(){
         	
         	/*console.log($(this).children('option:selected').text());*/
         	
         	var current = $(this).children('option:selected').text();
         	
            var $trs = $(".tbMain>tr");
           
            for(var i = 0;i<$trs.length;i++){
            	var powers = $($trs[i]).find('td').eq(2);

            	for(var j=0;j<powers.length;j++){
            		var power = $(powers[j]).text();
            		if(current == power){
            			$($trs[i]).show();
            		}
            		
            		else if(current =="显示所有"){
            		    $($trs[i]).show();
            	      }
            		
            		else{
            			$($trs[i]).hide();
            		}
            	}
            	
            	
            }
            
         })
         
       
         
		
		</script>
	</body>
</html>
